<script lang="ts" setup>
import { usePerson } from "@/stores/person";
import YMenu from "./YMenu.vue";
import { formatBigNumber, formatTimestamp } from "@/comm/format";
import { computed, onMounted, ref, toRaw } from "vue";
import { useRoute } from "vue-router";
import JNumber from "@/components/j-number/index.vue";
import JShare from "@/components/j-share/index.vue";
import { collect, isItem, keyType, ResType } from "@/comm/BookMark";
const capital = usePerson();
const route = useRoute();

const capitalName = computed(() => {
    return route.params.id;
});

const isActive = ref(false);
function setActive() {
    setTimeout(() => {
        isActive.value = isItem(keyType.Address, capitalName.value);
    }, 500);
}
function CallActive(type: ResType) {
    // console.log("yzt_聪明钱", type);
    setActive();
}
onMounted(() => {
    setActive();
});
const onJump = (url: string) => {
    if (!url) return
    window.open(url);
};
</script>

<template>
    <div class="header d-flex justify-space-between">
        <div class="icon d-inline-flex align-center h-flexs">
            <img src="https://cdn.vuetifyjs.com/images/parallax/material.jpg" />
            <div class="name">
                <p class="c-title-1">{{ capitalName }}</p>
                <div class="icons d-flex pt-2">
                    <!-- <VIcon class="coin-link1" @click="onJump(capital.detail.crunchBase)">mdi mdi mdi-earth</VIcon>&nbsp;
                                <VIcon class="coin-link1" @click="onJump(capital.detail.twitter)">mdi mdi-twitter</VIcon>&nbsp;
                                <JShare>
                                    <span class="iconfont icon-2102fenxiang coin-link1"></span>
                                </JShare>&nbsp; -->
                    <VIcon class="coin-link2" :class="isActive ? 'y-active' : ''"
                        @click="() => collect(keyType.Address, capitalName, CallActive)">mdi mdi-star </VIcon>
                </div>
            </div>
            &nbsp;
        </div>
        <div class="coin-table c-title-4" v-if="capital.detail">
            <v-row>
                <v-col class="v-item">
                    <div class="y-card">
                        <div class="tip1" style="margin: 0 auto">{{ $t("message.YHearder.a") }}</div>
                        <div class="tip2" v-if="capital.detail">
                            ${{ formatBigNumber(capital.totalAmount) }}&nbsp;
                            <JNumber :num="capital.day1Var" :is-color="true" :is-arrow="true"></JNumber>
                        </div>
                    </div>
                </v-col>
                <v-col class="v-item">
                    <div class="y-card spe">
                        <div class="tip1">{{ $t("message.YHearder.b") }}</div>
                        <JNumber :num="capital.day7Var" :is-arrow="true" :is-color="true"> </JNumber>
                    </div>
                </v-col>
                <v-col class="v-item">
                    <div class="tip1">{{ $t("message.YHearder.c") }}</div>
                    <div class="tip2">
                        {{ capital?.actTime ? formatTimestamp(capital.actTime) :'-' }}
                    </div>
                </v-col>
            </v-row>
        </div>
    </div>
</template>

<style lang="less" scoped>
.header {
    padding: var(--space) 0 var(--space) 0;

    .icon {
        img {
            --wh: 50px;
            width: var(--wh);
            height: var(--wh);
            border-radius: 50%;
        }

        .name {
            // width: 114px;
            text-align: center;
            position: relative;
            height: 55px;
            color: var(--color-2);
            // p {
            //     // font-size: 21px;
            //     font-family: PingFangSC-Regular, PingFang SC;
            //     font-weight: 400;
            //     color: #FFFFFF;
            //     line-height: 29px;
            // }

            .icons {
                align-items: center;
                position: absolute;
                top: 25px;
                // background-color: red;
                color: #4c545d;
                font-size: 16px;
            }
        }
    }

    .coin-link1 {
        font-size: 18px;
    }

    .coin-link2 {
        font-size: 20px;
    }

    .coin-table {
        // width: 475px;
        height: 100px;
        background-color: var(--card);
        border-radius: 8px;
        // font-size: 0.625vw;
        color: #b1b6c6;
        white-space: nowrap;
        padding-inline: 40px;
        padding-block: 25px;
        display: flex;
        color: var(--color-2);

        .v-item {
            padding-block: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .y-card {
            padding-right: 15px;
            border-right: 1px solid #30353b;
        }

        .tip1 {
            // width: 28px;
            height: 20px;
            // font-size: 14px;
            font-family:
                PingFangSC-Regular,
                PingFang SC;
            font-weight: 400;
            color: #b1b6c6;
            line-height: 20px;
        }

        .tip2 {
            height: 22px;
            font-family:
                PingFangSC-Regular,
                PingFang SC;
            font-weight: 400;
            line-height: 22px;
        }

        .tip_sub_2 {
            height: 22px;
            font-family:
                PingFangSC-Regular,
                PingFang SC;
            font-weight: 400;
            line-height: 22px;
        }
    }
}

.h-flexs {
    gap: 16px;
}

.no-line {
    text-decoration: none !important;
}

.spe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>
